<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例讲解--星级评分</title>
    <style>
        /*全局样式*/
        body,ul,p{
            margin:0;
            padding:0;
        }
        div{
            width:800px;
            margin:50px auto;
            position: relative;
        }
        ul{
            display:inline-block;
            list-style:none;
            vertical-align: middle;
            margin-right:10px;
        }
        li{
            width:30px;
            height:30px;
            background:url(img/star.png);
            background-size:30px;
            display:inline-block;
            /*margin-right:5px;*/
            cursor: pointer;
        }
        div span:nth-of-type(2){
            display:none;
        }
        span strong{
            color:red;
        }
        p{
            width:200px;
            position:absolute;
            left:120px;
            display:none;
        }
        p span{
            color:red;
            display:block;
        }
        li.on{
            background-position:bottom;
        }
    </style>
</head>
<body>
<div>
    <span> 点击星星进行评分： </span>
    <ul>
        <li>  </li>
        <li>  </li>
        <li>  </li>
        <li>  </li>
        <li>  </li>
    </ul>
    <span>
        <strong> 4分 </strong>
        (质量不错，与卖家描述的基本一致，还是挺满意的)
    </span>
    <p>
        <span> 5分 &nbsp; 十分满意 </span>
        质量不错，与卖家描述的基本一致，还是挺满意的
    </p>
</div>
</body>
<script>
    var arr1 = [
            '非常不满意','不满意','一般','满意','挺满意'
    ]
    var arr2 = [
            '差得太离谱，与卖家描述的严重不符，非常不满',
            '部分有破损，与卖家描述的不符，不满意',
            '质量一般，没有卖家描述的那么好',
            '质量不错，与卖家描述的基本一致，还是挺满意的',
            '质量非常好，与卖家描述的完全一致，非常满意'
    ]
//    先获取所有的标签元素
    var lis = document.querySelectorAll('li')
    var p = document.querySelector('p')
    var span2 = document.querySelectorAll('span')[1]
    var span3 = document.querySelectorAll('span')[2]
    var strong = document.querySelector('strong')
    var isStar, isScore, i

    for(i = 1; i <= lis.length ; i++){
        //    鼠标放上去，显示分值和评价
        lis[i - 1].index = i
        lis[i - 1].onmouseover = function(){
            p.style.display = 'block'
            p.innerHTML = '<span>' + this.index
                + '分 ' + arr1[this.index - 1] + '</span>'
                + arr2[this.index - 1]
//    //  鼠标在星星之前的所有都变亮
            show(this.index)
        }
//        当鼠标离开时，星星恢复白色，文字内容消失
        lis[i - 1].onmouseout = function(){
            p.style.display = 'none'
            show()
        }
//        当点击时候，显示评分，星星及之前的变亮
        lis[i - 1].onclick = function(){
            isStar = this.index
            span2.style.display = 'inline-block'
            span2.innerHTML = '<strong>' + this.index
                + '分</strong>，(' + arr2[this.index - 1] + ')'
            show(isStar)

        }
    }
// 鼠标所在位置与索引值的大小判断，
    function show(num){
//        分值赋值
        isScore = num || isStar
        for(i = 0; i < lis.length; i++){
            if ( i <  isScore ){
                lis[i].className = 'on'
            } else {
                lis[i].className = ''
            }
//            lis[i].className = (i < isScore) ? 'on' : ''
        }
    }
</script>
</html>